<template>
  <div class="page">
    <search-bar />
    <div class="content">
      <div class="left-menu">
        <tab-bar
          :tab-list="leftMenu"
          @change="fristChange"
        />
      </div>
      <div class="right">
        <div class="right-menu">
          <tab-bar
            :tab-list="rightMenu"
            @change="rightChange"
          />
        </div>
        <div class="right-content">
          <product-list
            :list="products"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SearchBar from './component/SearchBar'

export default {
  name: 'Classify',
  data () {
    return {
      leftMenu: [],
      rightMenu: [],
      products: [],
      loadFlg: false,
      fetchParams: {
        wareId: 0,
        page: 0,
        page_size: 5
      }
    }
  },
  components: {
    SearchBar
  },
  watch: {
    fetchParams: {
      handler: function () {
        this.getProductList()
      },
      deep: true // 深度监听，可以监听到对象中任意属性的改变
    }
  },
  created () {
    this.initData()
  },
  methods: {
    async initData () {
      const res = await this.$api.product.classify()
      this.leftMenu = res.data
      this.rightMenu = [{
        id: res.data[0].id,
        title: '全部'
      }].concat(res.data[0].children)
      this.fetchParams.wareId = res.data[0].id
    },
    async getProductList () {
      const list = await this.$api.product.list(this.fetchParams)
      if (this.fetchParams.page === 0) {
        this.products = list.data
      } else {
        this.products = this.products.concat(list.data)
      }
      this.loadFlg = false
    },
    fristChange (item) {
      this.fetchParams.wareId = item.id
      this.rightMenu = [{
        id: item.id,
        title: '全部'
      }].concat(item.children)
    },
    rightChange (item) {
      this.fetchParams.wareId = item.id
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  @include wh(100vw, calc(100vh - 108px));
  @include flex(column, initial, initial);
  overflow: hidden;
  .content {
    flex: 1;
    @include flex(row);
    height: calc(100% - 98px);
    .right {
      @include wh(auto, 100%);
      @include flex(column, initial, initial);
    }
    .left-menu {
      @include wh(172px, 100%);
      flex-shrink: 0;
      /deep/.tab-bar {
        @include wh(172px, 100%);
        nav{
          @include flex(column, initial, initial);
          a {
            text-align: center;
            background: #FAFAFA;
            padding: 15px 0;
            &.active {
              background: #fff;
              &:after {
                display: none;
              }
            }
          }
        }
      }
    }

    .right-menu {
      @include border1px(bottom, #E2E2E2);
      flex-shrink: 0;
      /deep/.tab-bar {
        nav{
          @include flex(row, flex-start, initial);
          a {
            text-align: center;
            &.active {
              &:after {
                display: none;
              }
            }
          }
        }
      }
    }

    .right-content {
      flex: 1;
      overflow: auto;
    }

  }
}
</style>
